<template>
	<view class="wrap">
		<view class="wrap__step"></view>
		<view class="wrap__main">
			<view class="main__item">
				<text class="item__title">{{$t("user.avatar")}}</text>
				<view class="item__right" @click="changeAvatar">
					<image :src="userInfo.avatar" mode="aspectFill" class="right__avatar" v-if="userInfo.avatar"></image>
					<image src="@/static/my/avatar.png" mode="aspectFill" class="right__avatar" v-else></image>
					<uni-icons type="right" color="#fff" size="18"></uni-icons>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("user.nickname")}}</text>
				<view class="item__right">{{userInfo.nickname}}</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("user.avatar")}}</text>
				<view class="item__right">{{userInfo.email || "-"}}</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("user.phone")}}</text>
				<view class="item__right">{{userInfo.mobile}}</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("user.qrcode")}}</text>
				<view class="item__right">
					<text class="right__title"></text>
					<uni-icons type="right" color="#fff" size="18"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				
			}
		},
		computed:{
			...mapState("user", ["userInfo"]),
		},
		methods:{
			// 选择头像
			changeAvatar(){
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:  async(res)=> {
						uni.showLoading({
							title:this.$t('loading.loading'),
							mask:true
						})
						let file = res.tempFilePaths[0]
						let result = await this.$api.uploadImg(file)
						let parseRes = result ? JSON.parse(result) : {}
						uni.hideLoading()
						if(parseRes.code === 1 && parseRes.data){
							this.updateUserAvatar(parseRes.data.url)
						}else{
							uni.showToast({
								title: result.msg,
								icon:"none"
							})
						}
					}
				});
			},
			// 修改头像
			async updateUserAvatar(url){
				let res = await this.$api.updateUserAvatar(url)
				if(res.code === 1){
					this.$store.dispatch("user/getUserInfo")
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		&__step{
			width: 750rpx;
			height: 30rpx;
			background: #0E101F;
		}
		.wrap__main{
			padding: 0 30rpx;
			box-sizing: border-box;
			.main__item{
				@include flexRowAlign(space-between);
				height: 98rpx;
				border-bottom: 1rpx solid #0E101F;
				box-sizing: border-box;
				&:first-child{
					height: 160rpx;
				}
				.item__title{
					font-size: 32rpx;
					color: #FFFFFF;
				}
				.item__right{
					@include flexRowAlign();
					font-size: 32rpx;
					color: #FFFFFF;
					.right__title{
						margin-right: 8rpx;
					}
					.right__avatar{
						width: 120rpx;
						height: 120rpx;
						margin-right:30rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>